<style scoped lang="less"></style>
<template>
    <div class="device-detail-blk">
        <div class="tab-nav" v-if="classify == '1'">
            <template v-for="(item, index) in navs">
                <a
                    href="javascript:;"
                    :class="{ active: activeType == item.type }"
                    :key="index"
                    @click="changeNav(item, index)"
                    v-if="classify == '1' || index != 2"
                    >{{ item.name }}</a
                >
            </template>
        </div>
        <Video
            :productId="productId"
            :id="id"
            :number="number"
            :scale="scale"
            v-if="
                classify == '6' ||
                    classify == '11' ||
                    classify == '12' ||
                    classify == '13' ||
                    classify == '14' ||
                    classify == '15' ||
                    classify == '16'
            "
        ></Video>
        <template v-else>
            <Basic v-if="activeType == '1'" :id="id" :classify="classify" :number="number" :scale="scale"></Basic>
            <Monitor
                v-if="activeType == '2'"
                :id="id"
                :number="number"
                :classify="classify"
                :scale="scale"
            ></Monitor>
            <Other
                v-if="activeType == '3' && classify == '1'"
                :id="id"
                :classify="classify"
                :scale="scale"
            ></Other>
        </template>
    </div>
</template>
<script>
import Basic from "@/components/device/DetailBasic.vue"
import Monitor from "@/components/device/DetailMonitor.vue"
import Other from "@/components/device/DetailOther.vue"
import Video from "@/components/device/Video.vue"
export default {
    name: "DeviceVideo",
    props: {
        scale: {
            type: Number,
            default: 1,
        },
        id: {
            // devicedId
            type: String,
            default: "",
        },
        productId: {
            // 产品Id
            type: String,
            default: "",
        },
        classify: {
            // 设备类型
            type: String,
            default: "",
        },
        number: {
            // 设备类型
            type: String,
            default: "",
        },
    },
    components: {
        Basic,
        Monitor,
        Other,
        Video,
    },
    watch: {},
    data() {
        // 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化
        return {
            type: this.$route.query.type,
            deviceClassify: {
                fire: {
                    id: "1",
                    name: "电气火灾",
                },
                pool: {
                    id: "2",
                    name: "消防用水",
                },
                smoke: {
                    id: "3",
                    name: "烟感",
                },
                gas: {
                    id: "4",
                    name: "可燃气体",
                },
                auto: {
                    id: "5",
                    name: "火灾自动联网",
                },
                monitor: {
                    id: "6",
                    name: "消防可视化",
                },
            },
            activeType: "1",
            navs: [
                {
                    type: "1",
                    name: "基本电参数",
                },
                {
                    type: "2",
                    name: "电力监测参数",
                },
                {
                    type: "3",
                    name: "其他参数",
                },
            ],
        }
    },
    methods: {
        changeNav(item, index) {
            this.activeType = item.type
        },
    },
    created() {
    },
}
</script>
